<style lang="less" scoped>

.sucaiimg_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  margin-left: 18.5vw;
  font-size: 0px;
  .sucailist_data{
    min-height: 35vw;
  }
  .sucaititle{
    font-size: 1.1vw;
  }
  .sucai_img{
    cursor:pointer;
    width: 100%;
  }
  .sucai_title{
    position:relative;
    width: 100%;
    text-align:center;
    font-size: 0.9vw;
    height: 3vw;
    padding-top: 0.1vw;
    .xaizaiimg{
      position: absolute;
      width: 1.8vw;
      height: 0.95vw;
      left:13.1vw;
      top:0.2vw;
      cursor:pointer;
    }
  }
  .fistimg{
    width: 61vw;
  }
  .footimg{
    width: 61vw;
    
  }
  
}
</style>
<template>
  <div >
    <MainUser></MainUser>
    <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw">
      <MainTitle ></MainTitle>
    </affix>
    
    <div class="sucaiimg_data">
      <div  v-for="(item,i) in layoutlistdata"
        v-if="i == 0">
        <el-image
          class="fistimg"
          :src="layoutlistdata[0].thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="margin-top:0.5vw;"></div>
      <div class="sucaititle" v-if="type == 3">品牌视频</div>
      <div class="sucaititle" v-if="type == 4">其他视频</div>
      <div class="sucailist_data" v-loading="loading">
        <el-row :gutter="10" >
          <el-col :span="6" v-for="(item,i) in sucaivadiolist">
            <el-image 
              class="sucai_img" 
              :src="item.thumb" 
              @click="bofang(item.id)">
            </el-image>
            <div class="sucai_title">
              {{item.title}}
              <!-- <el-image
                v-if="item.share_url"
                class="xaizaiimg"
                :src="xiazaiimg"
                :fit="'fill'"
                @click="xiazai(item.share_url)"
                >
              </el-image> -->
            <el-dropdown trigger="click" class="xaizaiimg">
              <span class="el-dropdown-link">
                <b class="downdian">···</b>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item ><div @click="xiazai(item.download_url)">下载</div></el-dropdown-item>
                <el-dropdown-item ><div @click="fenxiang(item.share_url)">分享</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:1vw;"></div>
      <div
        v-for="(item,i) in layoutlistdata"
        v-if="i > 0">
        <el-image
          class="footimg"
          :src="item.thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="height:1vw;"></div>
    </div>
    <el-dialog title="视频分享二维码"  :visible.sync="share_urlVisible" width="17%" top="30vh">
      <div v-if="share_url != ''" class="qrcode"  ref="qrCodeUrl"  :id="'qrCodeUrl'"></div>
    </el-dialog>
    
  </div>
</template>
<script>
import MainTitle from '../main_title'
import MainUser from '../main_user'
import QRCode from 'qrcodejs2'
import { vadiolist,layoutlist,sucaivadio } from '@/request/api';
export default {
    data() {
        return {
          share_urlVisible:false,
          xiazaiimg:require('../../../images/xiazai2.png'),
          fit:'cover',
            type:'',
            title:'',
            sucaivadiolist:[],
            pagintion: {
              total: 0,
              page_size:50,
              page: 1,
            },
            loading:false,
            pagesizes: [50,100],
            layoutlistdata:[],
            share_url:'',
            width:window.screen.width,
        }
    },
    mounted() {
      this.type = this.$route.query.type;
      this.getlayoutbackground();
      this.getimglist();
    },
    methods: {
        //修改条数
        handleSizeChange(val){
          this.pagintion.page_size = val;
          this.getimglist();
        },
        //翻页
        handleCurrentChange(val) {
            this.pagintion.page = val;
            this.getimglist();
        },
        //获取系列列表数据
        getimglist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          if(this.type == 3){
            param.type = 3;
          }else if(this.type == 4){
            param.type = 4;
          }
          vadiolist(param).then(res => {
            this.loading = false;
            if(res.ok){
              this.sucaivadiolist = res.data.data;
              this.pagintion.total = res.data.total;
            }
          })
        },
        getlayoutbackground(){
          var param = {};
          param.page = 0;
          param.size = 50;
          param.page_id = 5;
          layoutlist(param).then(res => {
            if(res.ok){
              this.layoutlistdata = res.data.data;
            }
          })
        },
        bofang(id){
          let routeUrl = this.$router.resolve({
            path: 'jlb_sucaivadiob',
            query: {'id': id}
          });
          window.open(routeUrl.href, '_blank');
        },
        xiazai(download_url){
          
          window.open(download_url);
        },
        fenxiang(share_url){
          this.share_url = '';
          
          this.share_urlVisible = true;
          console.log(this.share_url);
          // console.log(this.$refs.qrCodeUrl);
          this.share_url = share_url;
          
          this.$nextTick(function () {
            this.$refs.qrCodeUrl.innerHTML = '';
            new QRCode(this.$refs.qrCodeUrl, {
                  text: this.share_url, // 需要转换为二维码的内容
                  width: this.width*0.15,
                  height: this.width*0.15,
                  colorDark: '#000000',
                  colorLight: '#ffffff',
                  correctLevel: QRCode.CorrectLevel.H
              })
          });
        }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
